<template>
  <div class="cart-list">
    <scroll class="content" ref="scroll">
      <cartlistItem
        :itemInfo="item"
        v-for="(item, index) in cartlist"
        v-if="cartlist.length > 0"
      />
      <!-- <van-empty
        description="购物车为空哟，赶紧去选中心仪的商品吧"
        class="custom-image"
        :image="require('@/assets/img/error/nodata.jpeg')"
        v-else
      /> -->

      <div
        class="d-flex justify-center flex-direction-column align-items-center"
        v-else
      >
        <img
          width="90"
          height="90"
          src="//gw.alicdn.com/tfs/TB1U0RydwoQMeJjy1XaXXcSsFXa-220-220.png_190x190q90_.webp"
          alt=""
          class="mt-1 mb-1"
        />
        <p class="mb-1 mt-1" style="font-size: 16px; color: #666666">
          竟然没有心仪的宝贝？
        </p>
        <span style="font-size: 13px; color: #999999">赶紧行动起来吧！</span>
      </div>

      <div class="recommend mt-3">
        <img
          src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png"
        />
      </div>
      <cartrecommend />
    </scroll>
  </div>
</template>

<script>
import scroll from "@/components/common/better-scroll/scroll";
import cartrecommend from "./recommend.vue";
import cartlistItem from "./Cart-listItem";
export default {
  name: "",
  props: {
    cartlist: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    scroll,
    cartlistItem,
    cartrecommend,
  },
  methods: {},
  activated() {
    this.$refs.scroll.refresh();
  },
};
</script>

<style scoped>
.cart-list {
  height: calc(100vh - 88px);
  margin-top: 44px;
  background-color: var(--van-card-background-color);
}
.content {
  height: calc(100vh - 108px);
  height: 100%;
  overflow: hidden;
}
.recommend {
  display: flex;
  justify-content: center;
  padding: 0;
  border: none;
}
.recommend img {
  width: 50%;
}
.custom-image img {
  width: 50%;
  height: 50%;
}
</style>